<template>
	<div>
		<el-card class="mb-4" shadow="never">
			<div class="text-xl font-medium mb-[20px]">折线图</div>
			<echart width="100%" height="254px" :options="state.option" @echartClick="callbackFun" />
		</el-card>
		<el-card class="mb-4" shadow="never">
			<div class="text-xl font-medium mb-[20px]">柱状图</div>
			<echart width="100%" height="254px" :options="state.option2" @echartClick="callbackFun2" />
		</el-card>
		<el-card class="mb-4" shadow="never">
			<div class="text-xl font-medium mb-[20px]">饼图</div>
			<echart width="100%" height="254px" :options="state.option3" @echartClick="callbackFun3" />
		</el-card>
	</div>
</template>

<script setup lang="ts" name="compEchart">
import { reactive } from 'vue';

const state = reactive({
	option: {
		xAxis: {
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
		},
		yAxis: {
			type: 'value',
		},
		series: [
			{
				data: [150, 230, 224, 218, 135, 147, 260],
				type: 'line',
			},
		],
	},
	option2: {
		xAxis: {
			type: 'category',
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
		},
		yAxis: {
			type: 'value',
		},
		series: [
			{
				data: [120, 200, 150, 80, 70, 110, 130],
				type: 'bar',
			},
		],
	},
	option3: {
		title: {
			text: 'Referer of a Website',
			subtext: 'Fake Data',
			left: 'center',
		},
		tooltip: {
			trigger: 'item',
		},
		legend: {
			orient: 'vertical',
			left: 'left',
		},
		series: [
			{
				name: 'Access From',
				type: 'pie',
				radius: '50%',
				data: [
					{ value: 1048, name: 'Search Engine' },
					{ value: 735, name: 'Direct' },
					{ value: 580, name: 'Email' },
					{ value: 484, name: 'Union Ads' },
					{ value: 300, name: 'Video Ads' },
				],
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)',
					},
				},
			},
		],
	},
});

const callbackFun = (res) => {
	console.log(res);
};

const callbackFun2 = (res) => {
	console.log(res);
};

const callbackFun3 = (res) => {
	console.log(res);
};
</script>
